<template>
  <div id="sslist">
    <h2 class="van-doc-block__title">车辆列表</h2>
    <div>
      <van-tabs v-model="active" title-active-color="#333333" title-inactive-color="#808080">
        <van-tab title="待确认"></van-tab>
        <van-tab title="待审核"></van-tab>
        <van-tab title="已审核"></van-tab>
        <van-tab title="全部"></van-tab>
      </van-tabs>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="getlists"
    >
      <div class="list-view" v-if="active == 0">
        <div v-for="(item,index) of alllist" :key="index">
          <div class="card-view bg-gradual-blue shadow-blur" style @click="todatainfo(item)">
            <div class="card-view-flex1">
              <img src="../../../assets/1575772544.jpg" alt/>
            </div>
            <div class="card-view-flex2">
              <p>
                <span>车主姓名：{{item.ownerName}}</span>
              </p>
              <p>
                <span>车牌号：{{item.carPlate}}</span>
              </p>
              <p>
                <span>所在公司：{{item.czrGzdw}}</span>
              </p>
            </div>
            <div class="card-view-flex3">
              <p>{{item.statusName}}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="list-view" v-if="active == 1">
        <div v-for="(item,index) of alllist" :key="index">
          <div class="card-view bg-gradual-blue shadow-blur" style @click="todatainfo(item)">
            <div class="card-view-flex1">
              <img src="../../../assets/1575772544.jpg" alt/>
            </div>
            <div class="card-view-flex2">
              <p>
                <span>车主姓名：{{item.ownerName}}</span>
              </p>
              <p>
                <span>车牌号：{{item.carPlate}}</span>
              </p>
              <p>
                <span>所在公司：{{item.czrGzdw}}</span>
              </p>
            </div>
            <div class="card-view-flex3">
              <p>{{item.statusName}}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="list-view" v-if="active == 2">
        <div v-for="(item,index) of alllist" :key="index">
          <div class="card-view bg-gradual-blue shadow-blur" style @click="todatainfo(item)">
            <div class="card-view-flex1">
              <img src="../../../assets/1575772544.jpg" alt/>
            </div>
            <div class="card-view-flex2">
              <p>
                <span>车主姓名：{{item.ownerName}}</span>
              </p>
              <p>
                <span>车牌号：{{item.carPlate}}</span>
              </p>
              <p>
                <span>所在公司：{{item.czrGzdw}}</span>
              </p>
            </div>
            <div class="card-view-flex3">
              <p>{{item.statusName}}</p>
            </div>
          </div>
        </div>
      </div>

      <div class="list-view" v-if="active == 3">
        <div v-for="(item,index) of alllist" :key="index">
          <div class="card-view bg-gradual-blue shadow-blur" style @click="todatainfo(item)">
            <div class="card-view-flex1">
              <img src="../../../assets/1575772544.jpg" alt/>
            </div>
            <div class="card-view-flex2">
              <p>
                <span>车主姓名：{{item.ownerName}}</span>
              </p>
              <p>
                <span>车牌号：{{item.carPlate}}</span>
              </p>
              <p>
                <span>所在公司：{{item.czrGzdw}}</span>
              </p>
            </div>
            <div class="card-view-flex3">
              <p>{{item.statusName}}</p>
            </div>
          </div>
        </div>

      </div>
    </van-list>
  </div>
</template>

<script>
  import {Toast} from "vant";

  export default {
    name: "enterpriseCarCarList",
    data() {
      return {
        active: 0,
        islode: false,
        searchvalue: undefined,
        alllist: [],
        query: {
          pageNum: 1,
          pageSize: 10,
          corpId: '',
          status: 1
        },
        loading: false,
        finished: false,
      };
    },
    created() {
      this.query.corpId = this.$route.query.corpId;
    },
    watch: {
      active: function (e, v) {
        if(this.active == 3) {
          this.query.status = '';
        } else {
          this.query.status = this.active + 1;
        }
        this.query.pageNum = 1;
        this.alllist = [];
        this.finished = false;
      }
    },
    methods: {
      getlists() {
        this.$Api.get("/api/corp/findCorpCarList", this.query).then(res => {
          if (res.data.code == 200) {
            if (res.data.data.records.length > 0) {
              this.alllist.push(...res.data.data.records);
              this.query.pageNum++
            } else {
              this.finished = true;
            }
          } else {
            Toast(res.data.message);
          }
          // 加载状态结束
          this.loading = false;
          // 数据全部加载完成
          if (res.data.data.records.length < 10) {
            this.finished = true;
          }
        });
      },
      todatainfo(e) {
        if (e.dataStatus == 1) {
          this.$router.push({
            path: "/enterpriseCar/car/detail",
            query: {id: e.carId, type: 1}
          });
        } else {
          this.$router.push({
            path: "/enterpriseCar/car/detail",
            query: {id: e.carId, type: 0}
          });
        }
      },
    }
  };
</script>


<style>
  .van-doc-block__title {
    margin: 0;
    padding: 24px 16px 16px;
    color: #09f;
    font-weight: normal;
    font-size: 16px;
    line-height: 16px;
    text-align: center;
    border-bottom: 1px solid #09f;
  }
  .list-view {
    padding: 8px 12px;
    background-color: #f5f5f5;
  }

  .card-view {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0px 1px 2px #ccc;
    border: 1px solid #dddddd;
    border-radius: 3px;
    margin-bottom: 8px;
  }

  .card-view-flex1 {
    flex: 2;
    margin-right: 1rem;
    text-align: center;
  }

  .card-view-flex1 img {
    display: block;
    width: 7rem;
    height: 7rem;
  }

  .card-view-flex2 {
    flex: 3;
    line-height: 1.5rem;
  }

  .card-view-flex3 {
    padding-left: 0.3rem;
    flex: 1;
  }
</style>
